<template>
    <div class="tree">
        <el-tree
            class="scroll_bar"
            :style="{height: treeHeight}"
            :props="defaultProps"
            @node-click="handleNodeClick"
            lazy
            :load="loadNode"
        >
            <template slot-scope="{ node }">
                <span :title="node.label">{{node.label}}</span>
            </template>
        </el-tree>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getOrgName } from '@/api/materials/materialsMarketPrice'
import {  debounce } from '@/pages/materialsmanagement/utils/common'
export default {
    data () {
        return {
            searchKey: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'orgName',
                isLeaf: 'leaf'
            },
            screenWidth: 0,
            screenHeight: 0,
            datas: []

        }
    },
    computed: {
        ...mapState(['userInfo']),
        treeHeight () {
            return (this.screenHeight - 125) + 'px'
        },
    },
    created () {
        //this.getTreeData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {

        // async getTreeData () {
        //     const data =  await getOrgName({
        //         parentId: '0'
        //     })
        //     // await this.getTreeData(data[0].orgId)
        //     // console.log('data', data)
        //     // parseList(data, 'orgId', 'parentId', '0')
        //     // this.treeData.push(data[0])
        // },
        //懒加载
        loadNode (node, resolve) {
            //如果展开第一级，就加载
            if (node.level === 0) {
                this.getData(resolve)
            }
            //如果展开子级节点
            if (node.level > 0) {
                this.getChildnData(node, resolve)
            }

        },
        //加载第一级节点
        getData (resolve) {
            getOrgName({ parentId: '0' }).then(res=>{
                return resolve(res)
            })
        },
        //加载子级节点
        getChildnData (node, resolve) {
            console.log('node', node)
            getOrgName({ parentId: node.data.orgId }).then(res=>{
                return resolve(res)
            })
        },
        handleNodeClick ({ orgId, orgName }) {
            this.$emit('select', {
                orgId,
                orgName,
            })
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
    }
}
</script>

<style lang="scss" scoped>
    .tree{
        .search_box {
            position: fixed; left: 11px; top: 0; z-index: 2; padding: 10px 0 0; width: 246px; flex-direction: column; background: #fff;
        }
        .name {
            margin: 0 0 15px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            background-color: rgb(224, 231, 249);
        }
        .el-tree{
            overflow-y: auto;
        }
        ::v-deep.el-tree-node>.el-tree-node__children {
            width: 800px;
            &::-webkit-scrollbar {
                height: 8px;
            }
            &:hover{
                &::-webkit-scrollbar-thumb {
                    background: rgba(204, 204, 204, 0.8);
                    &:hover{
                        background: rgba(204, 204, 204, 1);
                    }
                }
            }
        }
    }
</style>